Un guide complet sur la règle CSS @supports, couvrant la détection de fonctionnalités, les requêtes avancées, les solutions de repli et des exemples pratiques pour créer des designs web robustes et responsives.
Maîtriser CSS @supports : Détection de fonctionnalités pour le design web moderne
Dans le paysage en constante évolution du développement web, il est primordial d'assurer la compatibilité entre les navigateurs et de gérer avec élégance les fonctionnalités non prises en charge. La règle CSS @supports offre un mécanisme puissant pour la détection de fonctionnalités, permettant aux développeurs d'appliquer conditionnellement des styles CSS en fonction du support du navigateur pour des fonctionnalités spécifiques. Cet article de blog plonge en profondeur dans les subtilités de @supports, explorant sa syntaxe, ses capacités et ses applications pratiques pour construire des designs web robustes et pérennes.
Qu'est-ce que CSS @supports ?
La règle @supports, également connue sous le nom de sélecteur de support CSS, est une règle at-rule conditionnelle qui vous permet de vérifier si un navigateur prend en charge une fonctionnalité CSS spécifique ou une combinaison de fonctionnalités. Elle évalue une condition et n'applique les styles définis dans la règle que si la condition est vraie. Cela vous permet d'améliorer progressivement l'apparence et la fonctionnalité de votre site web pour les navigateurs qui prennent en charge les nouvelles fonctionnalités CSS, tout en offrant des solutions de repli élégantes pour les navigateurs plus anciens.
Considérez-la comme une instruction "if" pour votre CSS. Au lieu de vérifier des variables JavaScript, vous vérifiez directement la capacité du CSS.
La syntaxe de @supports
La syntaxe de base de la règle @supports est la suivante :
@supports (condition) {
/* Règles CSS à appliquer si la condition est vraie */
}
La condition peut être une simple paire propriété-valeur CSS ou une expression plus complexe utilisant des opérateurs logiques.
Exemples de base : Détecter des fonctionnalités CSS uniques
Commençons par un exemple simple de détection du support pour la propriété display: grid :
@supports (display: grid) {
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
}
Dans cet exemple, si le navigateur prend en charge display: grid, les styles à l'intérieur de la règle @supports seront appliqués à l'élément .container, créant une mise en page en grille. Les navigateurs qui ne prennent pas en charge grid ignoreront simplement les styles, et le contenu sera probablement affiché dans une mise en page en bloc plus traditionnelle.
Un autre exemple, la détection du support de position: sticky, qui est utile pour créer des en-têtes ou des barres latérales fixes :
@supports (position: sticky) {
.sticky-element {
position: sticky;
top: 0;
background-color: white; /* Pour une meilleure visibilité */
z-index: 10;
}
}
Requêtes avancées : Combiner des conditions avec des opérateurs logiques
La règle @supports devient encore plus puissante lorsque vous combinez des conditions à l'aide d'opérateurs logiques tels que and, or et not.
L'opérateur "and"
L'opérateur and exige que les deux conditions de chaque côté soient vraies pour que la règle @supports s'applique. Par exemple :
@supports (display: flex) and (backdrop-filter: blur(10px)) {
.element {
display: flex;
backdrop-filter: blur(10px);
}
}
Cette règle ne s'appliquera que si le navigateur prend en charge à la fois display: flex et backdrop-filter: blur(10px). Si l'un ou l'autre n'est pas pris en charge, les règles ne seront pas appliquées.
L'opérateur "or"
L'opérateur or exige qu'au moins une des conditions de chaque côté soit vraie pour que la règle @supports s'applique. Considérez la vérification de différents préfixes de fournisseurs :
@supports ((--webkit-mask-image: url(image.png)) or (mask-image: url(image.png))) {
.masked-element {
-webkit-mask-image: url(image.png);
mask-image: url(image.png);
}
}
Cet exemple vérifie soit la propriété -webkit-mask-image (pour les anciennes versions de Safari et Chrome) soit la propriété standard mask-image. Si l'une ou l'autre est prise en charge, le style de masque sera appliqué.
L'opérateur "not"
L'opérateur not nie la condition qui le suit. Il s'évalue à vrai seulement si la condition est fausse. C'est particulièrement utile pour fournir des solutions de repli pour les navigateurs qui ne prennent *pas* en charge une fonctionnalité spécifique.
@supports not (display: grid) {
.container {
/* Styles de repli pour les navigateurs sans support de grid */
float: left;
width: 33.33%; /* Exemple de mise en page de repli */
}
}
Dans ce cas, les styles à l'intérieur de la règle @supports not (display: grid) seront appliqués aux navigateurs qui ne prennent *pas* en charge display: grid. Cela garantit que même les navigateurs plus anciens reçoivent une mise en page de base.
Exemples pratiques et cas d'utilisation
Explorons quelques exemples pratiques sur la façon d'utiliser @supports pour améliorer vos designs web.
1. Implémenter les variables CSS (propriétés personnalisées) avec des solutions de repli
Les variables CSS offrent un moyen puissant de gérer les styles et de créer des thèmes dynamiques. Cependant, les anciens navigateurs ne les prennent pas en charge. Nous pouvons utiliser @supports pour fournir des solutions de repli :
/* Styles par défaut (pour les navigateurs sans variables CSS) */
body {
background-color: #f0f0f0;
color: #333;
}
@supports ( --custom-property: true ) {
body {
background-color: var(--background-color, #f0f0f0); /* Valeur de repli si la variable n'est pas définie */
color: var(--text-color, #333);
}
}
Ici, nous définissons d'abord les styles par défaut pour les navigateurs qui ne prennent pas en charge les variables CSS. Ensuite, à l'intérieur de la règle @supports, nous utilisons var() pour appliquer les variables CSS si elles sont prises en charge. Le deuxième argument de `var()` est une valeur de repli utilisée si la propriété personnalisée n'est pas définie. C'est un moyen robuste de gérer les variables CSS potentiellement non définies dans les navigateurs qui les supportent.
2. Améliorer la typographie avec font-display
La propriété font-display contrôle la manière dont les polices sont affichées pendant leur chargement. Elle est prise en charge par la plupart des navigateurs modernes, mais les navigateurs plus anciens pourraient ne pas la reconnaître. Voici comment utiliser @supports pour améliorer la typographie tout en fournissant une solution de repli :
@font-face {
font-family: 'MyCustomFont';
src: url('my-custom-font.woff2') format('woff2'),
url('my-custom-font.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Styles par défaut */
body {
font-family: 'MyCustomFont', sans-serif;
}
@supports (font-display: swap) {
@font-face {
font-family: 'MyCustomFont';
src: url('my-custom-font.woff2') format('woff2'),
url('my-custom-font.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap; /* Utiliser swap pour les navigateurs modernes */
}
}
Dans cet exemple, nous définissons la police de caractères et l'appliquons au corps. La règle @supports vérifie ensuite la prise en charge de font-display: swap. Si elle est prise en charge, elle redéfinit la police de caractères avec font-display: swap, indiquant au navigateur d'afficher le texte de repli jusqu'à ce que la police personnalisée soit chargée. Les navigateurs qui ne prennent pas en charge font-display utiliseront simplement la police personnalisée lorsqu'elle sera chargée, sans le comportement d'échange.
3. Styliser les éléments de formulaire avec appearance
La propriété appearance vous permet de contrôler l'apparence native des éléments de formulaire. Cependant, son support peut varier selon les navigateurs. Vous pouvez utiliser @supports pour fournir un style cohérent tout en tirant parti des apparences natives lorsqu'elles sont disponibles :
/* Styles par défaut pour les navigateurs plus anciens */
input[type="checkbox"] {
/* Style personnalisé de la case à cocher */
width: 20px;
height: 20px;
border: 1px solid #ccc;
/* ... autres styles personnalisés ... */
}
@supports (appearance: none) or (-webkit-appearance: none) {
input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
/* Style amélioré pour les navigateurs modernes */
width: 20px;
height: 20px;
border: 1px solid #ccc;
background-color: white;
position: relative;
cursor: pointer;
}
input[type="checkbox"]:checked::before {
content: "\2713"; /* Caractère de coche */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 16px;
color: green;
}
}
Cet exemple définit d'abord un style personnalisé pour les cases à cocher pour les navigateurs qui ne prennent pas en charge la propriété appearance. Ensuite, à l'intérieur de la règle @supports, il réinitialise la propriété appearance à none et applique un style amélioré en utilisant des pseudo-éléments pour créer une case à cocher visuellement attrayante. Cela garantit une apparence cohérente sur différents navigateurs tout en tirant parti des apparences natives lorsque c'est possible.
4. Utiliser les formes CSS (CSS Shapes) avec des solutions de repli
Les formes CSS (CSS Shapes) vous permettent de créer des mises en page non rectangulaires en définissant des formes autour desquelles le contenu peut s'écouler. Cependant, le support des navigateurs n'est pas universel. @supports vous permet de mettre en œuvre une dégradation gracieuse.
.container {
width: 400px;
height: 300px;
position: relative;
}
.shaped-element {
width: 200px;
height: 200px;
float: left; /* Solution de repli pour les navigateurs sans CSS Shapes */
margin-right: 20px;
}
@supports (shape-outside: circle(50%)) {
.shaped-element {
float: none; /* Supprimer le flottant */
shape-outside: circle(50%);
width: 200px;
height: 200px;
margin-right: 20px;
}
}
Ici, nous utilisons float: left comme solution de repli. Les navigateurs qui ne prennent pas en charge les formes CSS feront simplement flotter le .shaped-element à gauche. Dans les navigateurs qui *prennent* en charge shape-outside, le flottant est supprimé et la forme est appliquée, permettant au texte de s'écouler autour du cercle.
5. Utiliser `object-fit` pour la gestion des images
La propriété object-fit est incroyablement utile pour contrôler la manière dont les images sont redimensionnées et s'insèrent dans leurs conteneurs. Cependant, l'absence de support nécessite des solutions de repli.
.image-container {
width: 200px;
height: 150px;
overflow: hidden; /* S'assurer que l'image ne dépasse pas */
}
.image-container img {
width: 100%;
height: auto; /* Maintenir le ratio d'aspect */
}
@supports (object-fit: cover) {
.image-container img {
width: 100%;
height: 100%;
object-fit: cover; /* Rogner l'image pour remplir le conteneur */
object-position: center; /* Centrer la partie rognée */
}
}
Les styles par défaut garantissent que l'image conserve son ratio d'aspect à l'intérieur du conteneur. La règle @supports applique ensuite object-fit: cover pour rogner l'image afin de remplir complètement le conteneur, et object-position: center centre la partie rognée, ce qui se traduit par un affichage d'image cohérent et visuellement attrayant sur différents navigateurs.
Bonnes pratiques pour l'utilisation de @supports
Pour utiliser efficacement la règle @supports, tenez compte des bonnes pratiques suivantes :
- Amélioration progressive : Utilisez
@supportspour améliorer l'expérience utilisateur pour les navigateurs qui prennent en charge des fonctionnalités avancées, tout en fournissant une base fonctionnelle pour les navigateurs plus anciens. - Spécificité : Soyez attentif à la spécificité CSS lorsque vous utilisez
@supports. Assurez-vous que les styles à l'intérieur de la règle@supportsont la spécificité appropriée pour remplacer tout style conflictuel. - Tests : Testez minutieusement votre site web sur différents navigateurs et appareils pour vous assurer que les règles
@supportsfonctionnent comme prévu. Utilisez les outils de développement du navigateur pour inspecter les styles appliqués et identifier tout problème de compatibilité. - Préfixes de fournisseurs : Lorsque vous vérifiez des propriétés avec préfixes de fournisseurs, utilisez l'opérateur
orpour couvrir différents préfixes. Par exemple :@supports ((-webkit-transform: rotate(45deg)) or (transform: rotate(45deg))). - Lisibilité : Formatez vos règles
@supportspour une meilleure lisibilité. Utilisez une indentation appropriée et des commentaires pour expliquer le but de chaque règle. - Éviter la sur-utilisation : Bien que
@supportssoit puissant, évitez de l'utiliser à l'excès. Une utilisation excessive de@supportspeut rendre votre CSS plus complexe et plus difficile à maintenir. Utilisez-le de manière stratégique pour résoudre des problèmes de compatibilité spécifiques ou améliorer des fonctionnalités particulières.
L'importance des solutions de repli
Fournir des solutions de repli est un aspect crucial de l'utilisation de @supports. Cela garantit une expérience utilisateur cohérente sur une large gamme de navigateurs, quel que soit leur support des nouvelles fonctionnalités CSS. Une solution de repli bien conçue devrait :
- Être fonctionnelle : La solution de repli doit fournir la fonctionnalité de base de la fonctionnalité, même si elle n'est pas aussi attrayante visuellement que la version améliorée.
- ĂŠtre accessible : La solution de repli doit ĂŞtre accessible Ă tous les utilisateurs, y compris ceux en situation de handicap.
- ĂŠtre maintenable : La solution de repli doit ĂŞtre facile Ă maintenir et Ă mettre Ă jour.
Par exemple, si vous utilisez une mise en page grid, une solution de repli pourrait impliquer l'utilisation de flottants ou de blocs en ligne pour créer une mise en page de base. Si vous utilisez des variables CSS, vous pouvez fournir des valeurs par défaut pour les couleurs et les polices.
Considérations sur la compatibilité des navigateurs
Bien que la règle @supports soit largement prise en charge par les navigateurs modernes, il est essentiel d'être conscient de certaines considérations de compatibilité :
- Navigateurs plus anciens : Les très anciens navigateurs peuvent ne pas prendre en charge du tout la règle
@supports. Dans de tels cas, tous les styles à l'intérieur de la règle@supportsseront ignorés. Il est crucial de fournir des solutions de repli adéquates pour ces navigateurs. - Internet Explorer : Les anciennes versions d'Internet Explorer ont un support limité pour les fonctionnalités CSS. Testez toujours votre site web dans Internet Explorer pour vous assurer que les solutions de repli fonctionnent correctement. Envisagez d'utiliser des commentaires conditionnels pour les correctifs spécifiques à IE si nécessaire (bien que cela soit généralement déconseillé au profit de la détection de fonctionnalités).
- Navigateurs mobiles : Les navigateurs mobiles ont généralement un bon support pour
@supports. Cependant, il est toujours essentiel de tester votre site web sur différents appareils mobiles et tailles d'écran pour garantir une expérience utilisateur cohérente.
Consultez des ressources comme Can I use... pour vérifier le support spécifique des navigateurs pour les fonctionnalités CSS et la règle @supports elle-même.
Considérations sur l'accessibilité
Lorsque vous utilisez @supports, il est vital de prendre en compte l'accessibilité pour garantir que votre site web est utilisable par tout le monde, quelles que soient leurs capacités. Voici quelques considérations en matière d'accessibilité :
- HTML sémantique : Utilisez des éléments HTML sémantiques pour fournir une structure claire et un sens à votre contenu. Cela aidera les technologies d'assistance à comprendre et à interpréter correctement votre site web.
- Attributs ARIA : Utilisez les attributs ARIA pour fournir des informations supplémentaires sur les rôles, les états et les propriétés de vos éléments. Cela peut améliorer l'accessibilité du contenu dynamique et des widgets personnalisés.
- Navigation au clavier : Assurez-vous que tous les éléments interactifs de votre site web sont accessibles via la navigation au clavier. Utilisez l'attribut
tabindexpour contrôler l'ordre de la mise au point et fournir des indices visuels pour indiquer quel élément est actuellement focalisé. - Contraste des couleurs : Assurez-vous qu'il y a un contraste de couleur suffisant entre le texte et les couleurs d'arrière-plan de votre site web. Cela facilitera la lecture de votre contenu pour les utilisateurs malvoyants.
- Tests avec les technologies d'assistance : Testez votre site web avec des technologies d'assistance telles que les lecteurs d'Ă©cran pour vous assurer qu'il est accessible aux utilisateurs en situation de handicap.
Au-delà de la détection de base : Vérifier des valeurs spécifiques
Alors que la plupart des exemples se concentrent sur la vérification du support d'une propriété, @supports peut également vérifier des valeurs *spécifiques*.
@supports (transform-origin: 50% 50%) {
.element {
transform-origin: 50% 50%;
}
}
Cela peut sembler redondant, mais c'est utile lors de la vérification du support de valeurs plus complexes. Par exemple :
@supports (display: contents) {
.element {
display: contents;
}
}
Cet exemple vérifie le support de la valeur `contents` pour la propriété `display`. Bien que `display` elle-même soit largement prise en charge, `display: contents` est un ajout plus récent, et cela vous permet de fournir une solution de repli.
L'avenir de la détection de fonctionnalités
La règle @supports est une pierre angulaire du développement web moderne, permettant aux développeurs d'adopter de nouvelles fonctionnalités CSS tout en maintenant la compatibilité avec les anciens navigateurs. À mesure que le CSS continue d'évoluer, la règle @supports restera un outil essentiel pour construire des designs web robustes, responsives et pérennes. Aux côtés d'outils comme PostCSS et Babel, elle aide à combler le fossé entre les fonctionnalités de pointe et l'adoption généralisée par les navigateurs.
Conclusion
La règle CSS @supports est un outil inestimable pour tout développeur web cherchant à créer des sites web modernes, robustes et compatibles avec tous les navigateurs. En comprenant sa syntaxe, ses capacités et ses bonnes pratiques, vous pouvez tirer parti de @supports pour améliorer progressivement vos designs, fournir des solutions de repli élégantes et garantir une expérience utilisateur cohérente sur une large gamme de navigateurs et d'appareils. Adoptez la puissance de la détection de fonctionnalités et élevez vos compétences en développement web au niveau supérieur. N'oubliez pas de tester minutieusement et de fournir des solutions de repli réfléchies pour répondre à la diversité des navigateurs web utilisés par les gens du monde entier.